<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core" >

    <ui:composition template="templates/creatively-index.xhtml">

        <ui:param name="pageTitle" value="X Files"/>

        <ui:define name="showcase">
            <!-- Showcase title -->
            <h2 class="grid_12"><a href="#{request.contextPath}/faces/galua.xhtml" >GO to the Galois field</a></h2>

            <!-- Showcase tagline -->
            <section class="tagline grid_12">
                <p>Advanced &amp; Secure File Storage Service.</p>
                <div id="my">
                    <c:if test="#{!loginBean.loggedIn}">
                        <a href="#" id="log_in" class="button_green_big" rel="popover" 
                           data-placement="top"
                           onclick="insidePopover = true;"                     
                           onmouseout="insidePopover = false;">Sign In</a>
                        <span>or</span>
                        <a href="#myModal" id="buy" 
                           data-toggle="modal"
                           class="button_green_big">Register</a>
                    </c:if>
                    <c:if test="#{loginBean.loggedIn}">
                        <a href="#{request.contextPath}/faces/cabinet/home.xhtml" id="go-to-cabinet" 
                           class="button_green_big">Go to Cabinet</a>
                    </c:if>
                </div>

            </section>

        </ui:define>

        <ui:define name="dialogs">
            <h:panelGroup id="after_registration" style="display: none">

            </h:panelGroup>

            <h:panelGroup id="log_in_content" style="display: none"  >
                
                <h:form id="login_user_form" prependId="false" onmouseout= "insidePopover = false"  onmouseup="insidePopover = true" >

                    <h:messages id="messages1" class="message" title="Validation Errors" showDetail="true"
                                style="margin-left: 0;" errorClass="message_bad" fatalClass="message_bad"
                                warnClass="message_info" infoClass="message_good">
                    </h:messages>
                    <h:panelGrid id="login_grid" columns="2" width="350px" style="text-align: left">
                        <h:outputLabel id="loginLabel" for="login_email" value="Your email"/> 
                        <h:inputText id="login_email" class="input-large" placeholder="mysupermail@mail.com" value="#{loginBean.login}"/>
                        <h:outputLabel id="passwordLabel" value="Your password" for="login_password"/>
                        <h:inputSecret id="login_password" class="input-large" placeholder="eg. X8df!90EO" value="#{loginBean.password}"/>


                        <a href="#myModal" data-toggle="modal" class="button_grey">Register</a>
                        <h:panelGroup style="display: block; text-align: right; width: 90%;">
                            <h:commandLink class="button_green" 
                                           style="text-decoration: none;" 
                                           value="Login" 
                                           actionListener="#{loginBean.loginAction}">
                                <f:ajax execute="@form" render="@form"  onevent="handleLogin"/>
                            </h:commandLink>
                        </h:panelGroup>
                    </h:panelGrid>         

                    <h:inputHidden id="login_status" value="#{loginBean.loginStatus}"/>
                </h:form>
                <script>
                    function handleLogin(e) {
                        if(e.status == 'success') {
                            var status = $('#login_status').val();
                            if(status == 'ok') {
                                window.location = '#{request.contextPath}/faces/cabinet/home.xhtml';
                            }
                        }
                    }
                </script>
            </h:panelGroup>

            <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: none"  >
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3 id="myModalLabel">Registration Dialog</h3>
                </div>
                <div class="modal-body">
                    <h:form id="registration_user_form" prependId="false">
                        <p><strong>Registration</strong></p>
                        <h:messages id="messages" class="message" title="Validation Errors" showDetail="true"
                                    style="margin-left: 0;" errorClass="message_bad" fatalClass="message_bad"
                                    warnClass="message_info" infoClass="message_good">
                        </h:messages>
                        <h:panelGrid id="reg_grid" columns="2" style="width: 450px; vertical-align: central;">


                            <label for="emailsignup" data-icon="e" >Your email</label>
                            <h:inputText id="emailsignup" placeholder="mysupermail@mail.com" value="#{registrationBean.email}"/>

                            <label for="passwordsignup" data-icon="p">Your password </label>
                            <h:inputSecret id="passwordsignup" placeholder="eg. X8df!90EO" value="#{registrationBean.password}"/>

                            <label for="passwordsignup_confirm" data-icon="p">Please confirm your password </label>
                            <h:inputSecret id="passwordsignup_confirm" placeholder="eg. X8df!90EO" value="#{registrationBean.passwordConfirmation}"/>

                            <label for="first_name" data-icon="e" >First Name</label>
                            <h:inputText id="first_name" placeholder="John" value="#{registrationBean.firstName}"/>

                            <label for="last_name" data-icon="e" >Last Name</label>
                            <h:inputText id="last_name" placeholder="Doe" value="#{registrationBean.lastName}"/>


                            <label for="info" data-icon="e" >Extra Info</label>
                            <h:inputText id="info" value="#{registrationBean.info}"/>

                        </h:panelGrid>
                        <div style="text-align: right;">
                            <h:commandLink class="button_grey" style="text-decoration: none;" value="Register" actionListener="#{registrationBean.registerAction}">
                                <f:ajax execute="@form" render="@form" onevent="handleRegistration"/>
                            </h:commandLink>

                        </div>
                        <h:inputHidden id="registration_status" value="#{registrationBean.registrationStatus}"/>
                    </h:form>

                </div>

            </div>


            <script type="text/javascript">
                function handleRegistration(e) {
                    if(e.status == 'success') {
                        var status = $('#registration_status').val();
                        if(status == 'ok') {
                            window.location = '#{request.contextPath}/faces/login.xhtml';
                        } else {
                            $('#myModal').effect("shake", { times:3 }, 300);
                        }
                    }
                }
            </script>
            <script>  
                var insidePopover = false;
                var popoverContent = '';
                $(document).ready(function () { 
                    initPopoverContent();
                    
                    $("#log_in").popover({
                        html:      true,
                        title:     function () {
                            return $(this).html();
                        },
                        content:   function () {
                            return popoverContent; 
                        } 
                        //  /   /  trigger: 'click'////
                        
                    });
                    $('body').click(function(){
                        
                                        if((!insidePopover)){ 
                                            $("#log_in").popover('hide');
                                        }
                                    }   
                                  );
                });
                
                function initPopoverContent() {
                            popoverContent = $('#log_in_content').html();
                            $('#log_in_content').html('');
                }
            </script> 
        </ui:define>

        <ui:define name="sidebar">

            <h3>Something about Creatively</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam faucibus nibh mi. Sed in lectus leo.</p>
            <p>Vestibulum ante <a href="#">ipsum primis</a> in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
            <ul class="check">
                <li>HTML5 valid</li>
                
                <li>Beautiful and lightweight</li>
                <li>Working contact form</li>
            </ul>
            <p>Donec ac diam id magna euismod interdum. Praesent vulputate scelerisque adipiscing.</p>

        </ui:define>

        <ui:define name="portfolio">
            
            <li class="grid_3">
                <a href="#"><img src="img/placeholders/214x114/1.jpg" alt="" class="shadow" /></a>
                <h4>Lorem ipsum</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut ipsum dui, id egestas sapien.</p>
            </li>
            <li class="grid_3">
                <a href="#"><img src="img/placeholders/214x114/2.jpg" alt="" class="shadow" /></a>
                <h4>Integer sagittis</h4>
                <p>Integer sagittis rutrum eleifend. Suspendisse a libero libero, vitae sagittis arcu.</p>
            </li>
            <li class="grid_3">
                <a href="#"><img src="img/placeholders/214x114/3.jpg" alt="" class="shadow" /></a>
                <h4>Phasellus dictum</h4>
                <p>Phasellus dictum elit at arcu condimentum sit amet elementum felis sollicitudin.</p>
            </li>
            <li class="grid_3">
                <a href="#"><img src="img/placeholders/214x114/4.jpg" alt="" class="shadow" /></a>
                <h4>Lorem ipsum</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus magna, consequat at semper id.</p>
            </li>
        </ui:define>

        <ui:define name="testimonials">
            <li>
                <q>Maecenas ut lacinia lorem. Nulla lacinia interdum porttitor. Curabitur id nisi elit, in pharetra est.</q>
                <span class="author">John Doe</span>
            </li>
            <li>
                <q>Fusce rutrum rutrum leo, congue semper eros ornare a. Quisque id orci dapibus mauris volutpat accumsan.</q>
                <span class="author">John Smith</span>
            </li>
        </ui:define>

        <ui:define name="twitter">
            <ul id="twitter"></ul>
        </ui:define>

        <ui:define name="list">
            <li>
                <h3><span>1</span> Lorem ipsum dolor sit amet</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut ipsum dui, id egestas sapien.</p>
            </li>
            <li>
                <h3><span>2</span> In consectetur nunc quis massa</h3>
                <p>In consectetur nunc quis massa pharetra eu elementum ante commodo. Curabitur nulla ligula, pretium fermentum accumsan at.</p>
            </li>
        </ui:define>

    </ui:composition>
</html>